<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="../css/a.css"> -->
</head>

<body>
  <!-- onsubmit="return false"  阻止表单默认提交 (onsubmit 表单提交事件)-->
  <form onsubmit="return false" action="" method="">
    <p>
      <label for="">用户名:</label>
      <input type="text" name="user" placeholder="请输入用户名">
    </p>
    <p>
      <label for="">密&emsp;码:</label>
      <input type="password" name="pwd" placeholder="请输入密码">
    </p>
    <p>
      <input type="range" value="0" min="0" max="255" step="1">
    </p>
    <p>
      <label>
        <input type="checkbox" name="isRem">
        是否记住用户名?
      </label>
    </p>
    <p>
      <button class="get">获取</button>
      <button class="set">设置</button>
    </p>
  </form>
</body>
<script>
  // 表单元素相关的属性.

  // type         获取和设置表单元素type
  // name         获取和设置表单元素name
  // placeholder  获取和设置表单元素placeholder
  // value        获取和设置表单元素value

  // 状态相关
  // disabled     获取和设置表单元素是否禁用 (true:禁用  false:不禁用(默认))
  // required     获取和设置表单元素是否必填 (true:必填  false:选填(默认))
  // checked      获取和设置表单元素是否被选中(input:checkbox input:radio) (true:选中  false:未选中(默认))

  var userInp = document.getElementsByName("user")[0];
  var pwdInp = document.getElementsByName("pwd")[0];
  var isRem = document.getElementsByName("isRem")[0];
  var getBtn = document.getElementsByClassName("get")[0];
  var setBtn = document.getElementsByClassName("set")[0];

  console.dir(userInp);

  getBtn.onclick = function () {
    // console.log(userInp.type);
    // console.log(userInp.name);
    // console.log(userInp.placeholder);
    // console.log(userInp.value);.

    console.log(userInp.disabled);
    console.log(pwdInp.required);
    console.log(isRem.checked);
  }

  setBtn.onclick = function () {
    // pwdInp.type="text";
    // pwdInp.name="haha";
    // pwdInp.placeholder = "password"

    userInp.disabled = true;
    pwdInp.required = true;
    isRem.checked = true;
  }


</script>

</html>